<template>
  <el-dialog
    title="排障流程提示"
    :model-value="visible"
    @update:model-value="handleVisibleChange"
    width="1000px"
    center
    custom-class="absolute-dialog"
    append-to-body
  >
    <div class="tips-image-container">
      <img
        src="@/assets/PTCWarn.png"
        alt="排障流程提示"
        class="tips-image"
        width="1000"
        height="600"
      />
    </div>
  </el-dialog>
</template>

<script setup>
import { ElDialog } from "element-plus";

// Props定义
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

// Emits定义
const emit = defineEmits(["update:visible"]);

// 处理可见性变化
const handleVisibleChange = (newValue) => {
  emit("update:visible", newValue);
};
</script>

<style scoped>
/* 确保弹窗显示在iframe上方 */
:deep(.absolute-dialog) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999 !important;
  background-color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 确保弹窗的遮罩层也显示在iframe上方 */
:deep(.el-dialog__wrapper) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9998 !important;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 确保整个弹窗系统不受父元素样式影响 */
.el-dialog__wrapper {
  position: fixed !important;
  z-index: 9998 !important;
}

.absolute-dialog {
  position: fixed !important;
  z-index: 9999 !important;
}

.tips-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.tips-image {
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>